<template>
	<el-dialog v-model="centerDialogVisible" :title="type == 1 ? '跟进登记' : '编辑跟进登记'" width="720" align-center center>
		<div class="pt20">
			<el-form @submit.prevent ref="form" :model="form" :rules="rules" :inline="true" :label-width="85">
				<el-form-item label="跟进日期" prop="followupTime">
					<el-date-picker
						v-model="form.followupTime"
						type="datetime"
						placeholder="请选择"
						size="large"
						style="width: 240px;"
						 value-format="YYYY-MM-DD  HH:mm:ss"
					  />
				</el-form-item>
				<el-form-item label="跟进类型" prop="followupType" style="margin-right: 0;">
					<el-select v-model="form.followupType" placeholder="请选择" size="large" style="width: 240px;">
						<el-option v-for="dict in bus_followup_type" :key="dict.value" :label="dict.label"
							:value="dict.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="客户姓名" prop="customerId">
					<el-input size="large" @focus="chooseCustomer" :disabled="customerId != '' ? true : false"
						v-model="form.customerName" style="width: 240px" placeholder="请输入" />
					<!-- :disabled="customerId != '' ? true : false" -->
					<!-- <el-select
						style="width: 240px;"
						v-if="customerId == ''"
					    v-model="form.customerId"
					    filterable
						remote
						reserve-keyword
						:remote-method="customerList"
						:loading="loading"
						size="large"
						placeholder="请输入"
					  >
					    <el-option
					      v-for="item in options"
					      :key="item.id"
					      :label="item.customerName"
					      :value="item.id"
					    />
					  </el-select>
					  <el-select style="width: 240px;" v-else size="large" v-model="form.customerId" disabled placeholder="请选择">
						  <el-option
							v-for="item in options"
							:key="item.value"
							:label="item.label"
							:value="item.value">
						  </el-option>
					  </el-select> -->
				</el-form-item>
				<el-form-item label="客户状态" prop="customerStatus" style="margin-right: 0;">
					<el-select v-model="form.customerStatus" style="width: 240px;" placeholder="请选择" size="large">
						<el-option v-for="dict in bus_customer_status" :key="dict.value" :label="dict.label"
							:value="dict.value" />
					</el-select>
				</el-form-item>
				<el-row class="">
					<el-col :span="24" v-for="(item,index) in bus_followup_field_management" :key="index">
						<el-form-item :label="item.label" prop="time">
							<el-input v-model="item.content" size="large" placeholder="请输入" style="width: 596px;" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="水印照片" prop="photoUrl" style="width: 570px;">
							 <el-upload
								name="file"
								class="avatar-uploader"
								:action="url"
								:headers="headers"
								:show-file-list="false"
								:on-success="handleAvatarSuccess"
								:before-upload="beforeAvatarUpload"
							  >
								<img v-if="form.photoUrl" :src="form.photoUrl" style="width: 110px;height: 110px;" />
								<div v-else>
									<el-icon class="avatar-uploader-icon"><Plus /></el-icon>
									<div class="fs12">上传图片</div>
								</div>
							  </el-upload>
						</el-form-item>
					</el-col>
				</el-row>
				 <!--  -->
				<div v-if="type == 1">
					<div class="fb fs16 mt10 color333 mb20 ml15">
						<el-checkbox v-model="checked">创建下次跟进任务</el-checkbox>
					</div>
					<div v-if="checked == true">
						<el-form-item label="跟进时间" prop="nextFollowupTime">
							<el-date-picker
								v-model="form.nextFollowupTime"
								type="datetime"
								placeholder="请选择"
								size="large"
								style="width: 240px;"
								value-format="YYYY-MM-DD HH:mm:ss"
							  />
						</el-form-item>
						<el-form-item label="跟进内容" prop="nextFollowupContent" style="margin-right: 0;">
							<el-input v-model="form.nextFollowupContent" size="large" placeholder="请输入" style="width: 240px" />
						</el-form-item>
						<el-form-item label="跟进人员" prop="staffName">
							<el-input disabled v-model="form.nextFollowupRecord.staffName" size="large" placeholder="请输入" style="width: 240px" />
						</el-form-item>
						<el-form-item label="跟进提醒" prop="nextSreminderType" style="margin-right: 0;">
							<el-select v-model="form.nextSreminderType" placeholder="请选择" size="large" style="width: 240px;">
								<el-option v-for="dict in bus_followup_task" :key="dict.value" :label="dict.label"
									:value="dict.value" />
							</el-select>
						</el-form-item>
						<el-form-item label="提醒方式" prop="nextSeminderMethod">
							<el-radio-group v-model="form.nextSeminderMethod" style="width: 340px">
								<el-radio v-for="dict in bus_reminder_method" :key="dict.value" :label="dict.value"
									:value="dict.value" size="large" >
									{{dict.label}}
								</el-radio>	
							</el-radio-group>
						</el-form-item>
					</div>
				</div>
			</el-form>
		</div>
		<template #footer>
			<div class="dialog-footer text-right" style="padding-right: 16px;">
				<el-button class="cancelSubBtn" @click="centerDialogVisible = false">取消</el-button>
				<el-button type="primary" class="mainSubBtn"
					@click="submit('form')">
					确定
				</el-button>
			</div>
		</template>
	</el-dialog>
	<!-- 客户弹窗 -->
	<customerListPop ref="customerDialog" @customerFunc="customerFunc"></customerListPop>
</template>

<script>
	
	import { getToken } from "@/utils/auth";
	import {upload} from '@/api/business/customer'
	import { addRecord } from '@/api/business/followup'
	import { customerList,getCustomerDetail } from "@/api/business/customer";
	import {  eidtFollowupDetail,editRecord } from "@/api/business/followup";
	import { getUserInfo } from '@/utils/ruoyi'
	import {
	 getUserListData
	} from "@/api/business/teamOpportunity";
import { number } from "echarts";
	import customerListPop from "@/components/customer/index.vue" //客户弹窗
	export default{
		components: {
			customerListPop
		},
		props:{
			parentId:{
				type:String,
				default:''
			},
			customerId:{
				type:String,
				default:''
			},
		},
		data() {
			return {
				checked:false,
				url:import.meta.env.VITE_APP_BASE_API + "/common/upload",
				type:1,//1新增  2编辑
				headers: {
					Authorization: 'Bearer ' + getToken() // 这里的getToken方法需要你自己实现，用于获取你的Token
				},
				bus_followup_task:this.useDict("bus_followup_task").bus_followup_task,
				bus_task_status:this.useDict("bus_task_status").bus_task_status,
				bus_customer_status:this.useDict("bus_customer_status").bus_customer_status,
				bus_reminder_method:this.useDict("bus_reminder_method").bus_reminder_method,
				bus_followup_type:this.useDict("bus_followup_type").bus_followup_type,
				bus_followup_field_management:this.useDict('bus_followup_field_management').bus_followup_field_management,
				centerDialogVisible: false,
				customerStatus:'',
				form:{
					parentId:'',//从计划列表添加时需要
					followupTime:'',//跟进时间
					followupType:'',//跟进类型
					customerId:this.customerId,//客户id
					customerName:'',
					customerStatus:'',//客户状态
					dynamicData:'',//动态数据
					photoUrl:'',
					nextFollowupRecord:{
						followupTime:'',//跟进时间
						followupContent:'',//跟进内容
						staffId: this.staffUserId, //跟进人员
						staffName:this.staffUserName,
						reminderMethod:'',//提醒方式
						reminderType:'',//任务提醒
					},//跟进任务
					nextFollowupTime:'',
					nextFollowupContent:'',//跟进内容
					nextStaffId: this.staffUserId,//跟进人员
					nextReminderMethod:'',//提醒方式
					nextReminderType:'',//任务提醒
				},
				rules: {
				  taskStatus: [
				    { required: true, message: "不能为空", trigger: "blur" },
				  ],
				  customerId:[
				    { required: true, message: "不能为空", trigger: "blur" },
				  ],
				  customerStatus:[
				    { required: true, message: "不能为空", trigger: "blur" },
				  ],
				  // nextFollowupTime: [
				  //   { required: true, message: "不能为空", trigger: "change" },
				  // ],
				  // nextFollowupContent: [
				  //   { required: true, message: "不能为空", trigger: "blur" },
				  // ],//跟进内容
				},
				teamOptions:'',
				options:[],//客户列表
				loading:false,
				message:{},
				value:'选项1'
			}
		},
		watch:{
			customerId(val){
				if(val){
					this.getUserDetail(this.customerId)
				}
			}
		},
		created() {
			// this.getUserList()
		},
		methods:{
			// 关联客户
			chooseCustomer() {
				this.$refs.customerDialog.open()
			},
			//获取选中的客户信息
			customerFunc(e) {
				console.log(e,'eeeee')
				this.form.customerId = e.id
				this.form.customerName = e.name
				// this.planForm.staffId = e.businessManagerId //跟进人员
				// this.planForm.staffName = e.businessManagerName
			},
			// 获取客户详情
			getUserDetail(customerId){
				getCustomerDetail(customerId).then(res=>{
					this.form.customerId = customerId
					this.form.customerName = res.data.customerName
					this.form.customerStatus = res.data.customerStatus
					this.customerStatus = res.data.customerStatus
					this.options = [
						{
							value: this.form.customerId,
							label: res.data.customerName
						}
					]
				})
			},
			/**
			 * 获取本人和下级用户数据
			 */
			getUserList() {			  
			    //获取自己和同部门的用户信息
			    getUserListData().then(response => {
			      this.teamOptions = response.data;
			    });
			 
			},
			customerList(query){
				if (query !== '') {
				  this.loading = true;
				  setTimeout(() => {
					this.loading = false;
					let data = {
						keyWords:query
					}
					customerList(data).then(response => {
					  this.options = response.rows;
					});
				  }, 200);
				} else {
				  this.options = [];
				}
			},
			handleAvatarSuccess(e){
				console.log(e,'e1')
				this.form.photoUrl = e.url
			},
			beforeAvatarUpload(e){
				console.log(e,'e2=======')
				// return false
			},
			submit(formName){
				console.log(this.form,'this.form')
				let arr1 = this.bus_followup_field_management
				let item
				for(let key in arr1){
					let content = arr1[key].content ? arr1[key].content : ''
					item = '[{\"code\":\"'+arr1[0].value+'\",\"content\":\"'+(arr1[0].content ? arr1[0].content : '')+'\"},{\"code\":\"'+arr1[1].value+'\",\"content\":\"'+(arr1[1].content ? arr1[1].content : '')+'\"},{\"code\":\"'+arr1[2].value+'\",\"content\":\"'+(arr1[2].content ? arr1[2].content : '')+'\"},{\"code\":\"'+arr1[3].value+'\",\"content\":\"'+(arr1[3].content ? arr1[3].content : '')+'\"}]'
				}
				this.form.dynamicData = item
				// if(this.form.nextFollowupTime == '' && this.form.nextFollowupContent == '' && this.form.nextReminderMethod == '' && this.form.nextReminderType == ''){
				// 	this.form.nextFollowupRecord = null
				// }
				if(this.checked == false){
					this.form.nextFollowupRecord = null
				}else if(this.form.nextFollowupTime == ''){
					this.$modal.msgError("请添加跟进时间");
					return false;
				}else if(this.form.nextFollowupContent == '' ){
					this.$modal.msgError("请填写跟进内容");
					return false;
				}else{
					this.form.nextFollowupRecord.followupTime = this.form.nextFollowupTime
					this.form.nextFollowupRecord.followupContent = this.form.nextFollowupContent
					this.form.nextFollowupRecord.staffId = this.form.nextStaffId
					this.form.nextFollowupRecord.reminderMethod = this.form.nextReminderMethod//提醒方式
					this.form.nextFollowupRecord.reminderType = this.form.nextReminderType//任务提醒
				}
				this.$refs[formName].validate((valid) => {
				  if (valid) {
					this.form.parentId = this.parentId
					
					if(this.type == 1){
						addRecord(this.form).then(response=>{
							this.$modal.msgSuccess("添加成功");
							this.close()
							setTimeout(()=>{
								this.$emit('recordList')
							},800)
						})
					}else{
						editRecord(this.form).then(response=>{
							this.$modal.msgSuccess("修改成功");
							this.close()
							setTimeout(()=>{
								this.$emit('recordList','refreshDetail')
							},800)
						})
					}
					
				  } else {
					console.log('error submit!!');
					return false;
				  }
				});
			},
			open(value){
				console.log(value,'value')
				this.resertDialog()
				this.centerDialogVisible = true
				if(value){
					if(value == 'appPlan'){
						this.getUserDetail(this.customerId)
						return false
					}
					this.type = 2
					eidtFollowupDetail(value.id).then(res=>{
						this.form = res.data
						this.getUserDetail(value.customerId)
							this.form.nextFollowupRecord = {
								followupTime:'',//跟进时间
								followupContent:'',//跟进内容
								staffId:'',//跟进人员
								reminderMethod:'',//提醒方式
								reminderType:'',//任务提醒
							}//跟进任务
							this.form.nextFollowupContent = res.data.followupContent
							this.form.nextReminderMethod = res.data.followupMethod
							this.form.nextStaffId = res.data.staffId
							this.form.nextReminderType = res.data.reminderType
							this.form.nextFollowupTime = res.data.followupTime
							let dynamicData = JSON.parse(res.data.dynamicData)
							for(let key in this.bus_followup_field_management){
								for(let i in dynamicData){
									if(dynamicData[i].code == this.bus_followup_field_management[key].value){
										this.bus_followup_field_management[key].content = dynamicData[i].content
										this.bus_followup_field_management[key].label = this.bus_followup_field_management[key].label
									}
								}
							}
					})
				}else{
					this.type = 1
					
				}
			},
			close(){
				this.centerDialogVisible = false				
			},
			resertDialog(){
				this.form = {
					followupTime:'',//跟进时间
					followupType:'',//跟进类型
					customerId:this.customerId,//客户id
					customerStatus:this.customerStatus,//客户状态
					dynamicData:'',//动态数据
					photoUrl:'',//照片
					nextFollowupRecord:{
						followupTime:'',//跟进时间
						followupContent:'',//跟进内容
						staffId: this.staffUserId, //跟进人员
						staffName:this.staffUserName,
						reminderMethod:'',//提醒方式
						reminderType:'',//任务提醒
					},//跟进任务
					nextFollowupTime:'',
					nextFollowupContent:'',//跟进内容
					nextStaffId: this.staffUserId,//跟进人员
					nextReminderMethod:'',//提醒方式
					nextReminderType:'',//任务提醒
				}
				for(let key in this.bus_followup_field_management){
					this.bus_followup_field_management[key].content = ''
				}
				this.$forceUpdate()
			}
		}
	}
</script>

<style>
	.avatar-uploader .el-upload {
	  background: #F7F8FA;
	  border-radius: 6px;
	  cursor: pointer;
	  position: relative;
	  overflow: hidden;
	  transition: var(--el-transition-duration-fast);
	  width: 110px;
	  height: 110px;
	  text-align: center;
	  line-height: 22px;
	  color: #8c939d;
	}
	
	.avatar-uploader .el-upload:hover {
	  border-color: var(--el-color-primary);
	}
	
	.el-icon.avatar-uploader-icon {
	  font-size: 28px;
	  color: #8c939d;
	  text-align: center;
	}
</style>